<template>
  <div class="more-action">
    <!-- 状态1 -->
    <van-cell-group v-if="!isReport">
      <!-- $emit('dislike')触发事件，交给父组件去监听 -->
      <van-cell @click="$emit('dislike')">不感兴趣，写的啥</van-cell>
      <van-cell @click="isReport=true">反馈辣鸡内容</van-cell>
      <van-cell>拉黑拉黑，没营养</van-cell>
    </van-cell-group>
    <!-- 状态2 -->
    <van-cell-group v-else>
      <van-cell icon="arrow-left" @click="isReport=false">返回</van-cell>
      <van-cell v-for="item in report" :key="item.value" @click="reportMethod(item.value)">
        {{ item.label }}
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
  import report from '@/constant/report.js'

  export default {
    name: 'moreAction',
    data () {
      return {
        // 是否处于状态二
        isReport: false,
        report
      }
    },
    methods: {
      /**
       * 点击举报项触发的方法
       * @param value 举报文章的类型
       */
      reportMethod (value) {
        // 使用事件中心发布一个事件，其他组件可以通过this.bus.$on('jubao')来监听到此事件
        this.$bus.$emit('jubao', value)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .more-action {
    // 设置边框圆角
    border-radius: 4px;
  }
</style>
